import { useState } from 'react';
import styles from './style.module.css'

interface PropsType {
  handleAddClick: (value: string) => void
}

const Header: React.FC<PropsType> = ({ handleAddClick }) => {
  const [value, setValue] = useState("");
  
  const handleClick = () => {
    handleAddClick(value);
    setValue("");
  };

  return (
    <div>
      {/* 输入区域 */}
      <div className={styles.inputContainer}>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              handleClick();
            }
          }}
          placeholder="输入待办事项..."
          className={styles.input}
        />
        <button onClick={handleClick} className={styles.addButton}>
          添加
        </button>
      </div>
    </div>
  );
};

export default Header;
